<template>
  <el-dialog
    :title="`${batchTitle} 补助执行详情`"
    :visible.sync="visible"
    width="790px"
  >
    <data-table-app-view>
      <el-form slot="toolbar" inline :model="searchForm">
        <el-form-item label="身份证号码">
          <el-input v-model="searchForm.idcard" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.realName" clearable style="width: 90px" />
        </el-form-item>
        <el-form-item label="状态">
          <type-select
            v-model="searchForm.status"
            :items="[
              {text: '待执行', value: 0},
              {text: '入账成功', value: 1},
              {text: '入账失败', value: 2}
            ]"
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item>
          <data-table-query-button :query-params="searchForm" />
        </el-form-item>
      </el-form>
      <data-table
        ref="table"
        url="/api/grant/account/page"
        :height="400"
        :pagination="{pageSize: 8}"
        lazy
      >
        <el-table-column prop="idcard" label="身份证号码" width="174" />
        <el-table-column prop="realName" label="姓名" width="70" />
        <el-table-column prop="money" label="补助金额" width="80" />
        <el-table-column prop="status" label="状态" width="86" v-slot="{row}">
          <el-tag v-if="row.status == 0" type="info">待执行</el-tag>
          <el-tag v-else-if="row.status == 1" type="success">入账成功</el-tag>
          <el-tag v-else-if="row.status == 2" type="danger">入账失败</el-tag>
        </el-table-column>
        <el-table-column prop="updateTime" label="入账时间" width="152" v-slot={row}>
          {{row.updateTime || '-'}}
        </el-table-column>
        <el-table-column v-slot="{row}" label="操作" fixed="right">
          <el-button
            v-if="row.status == 1"
            type="text"
            size="medium"
            @click="onTradeClick(row)"
          >
            服务站消费记录
          </el-button>
        </el-table-column>
      </data-table>
    </data-table-app-view>

  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      searchForm: {},
      batchTitle: ''
    };
  },
  methods: {
    open(batch) {
      this.visible = true;
      this.batchTitle = batch.title;
      this.searchForm.batch = batch.batch;
      this.$nextTick(() => {
        this.$refs.table.query(this.searchForm);
      });
    },
    onTradeClick(record) {
      this.visible = false;
      this.pushPage({
        path: '/shop/finance/trade',
        params: { query: {userAccount: record.userId, startCreateTime: record.updateTime.substring(0, 10) + ' 00:00:00'} },
        subTitle: record.realName + ' - 服务站消费',
        key: record.userId
      });
    }
  }
}
</script>

<style scoped>
>>> .el-dialog__body {
  height: 480px;
}
</style>
